<template>
  <div class='container'>
    <div>
      <el-dialog title="预览文章" :visible="showPreviewDialog" @close="close">
        <h2>{{ formData.title }}</h2>
        <div>
          <span>{{ parseTime(formData.createTime) }}</span>
          <span>{{ formData.username }}</span>
          <span class="el-icon-view"></span>
          <span>{{ formData.visits }}</span>
      </div>
      <el-alert  class="info" type="info" :closable="false">
        <div v-html="formData.articleBody"></div>
      </el-alert>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index.js'
export default {
  watch: {
    previewarticlesById () {
      this.formData.title = this.previewarticlesById.title
      this.formData.username = this.previewarticlesById.username
      this.formData.articleBody = this.previewarticlesById.articleBody
      this.formData.visits = this.previewarticlesById.visits
      this.formData.createTime = this.previewarticlesById.createTime
    }
  },
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    previewarticlesById: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      parseTime: parseTime,
      formData: {
        title: '', // 标题
        username: '', // 名字
        articleBody: '', // 文章正文
        visits: '', // 查看数量
        createTime: '' // 时间
      }
    }
  },
  methods: {
    // 关闭弹框
    close () {
      this.$emit('update:showPreviewDialog', false)
      this.formData = {
        title: '',
        username: '',
        articleBody: '',
        visits: ''
      }
    }
  }
}
</script>

<style scoped lang='less'>
h2 {
  margin: 0;
  padding-bottom: 10px;
}
span {
  margin-left: 10px;
  margin-top: 10px;
  padding-bottom: 20px;
}
.info {
  border-top: 1px dashed #ccc;
  padding: 8px 0px;

}
::v-deep .el-alert .el-alert__description {
  color: #606266;
  font-size: 14px;
}
</style>
